<template>
  <div class="big" @click="showClick">
    <!-- <div class="box" @click="show = false"></div> -->
    <div class="small" @click.stop="goStop">
      <img class="img" src="../assets/logo.png" />
      <div class="login" v-if="showLogin == true">
        <h4>登录</h4>
        <el-input
          v-model="userInfo.username"
          placeholder="请输入用户名"
        ></el-input>
        <el-input
          placeholder="请输入密码"
          v-model="userInfo.password"
          show-password
        ></el-input>
        <el-button type="primary" size="medium" @click="login">登录</el-button>
        <span class="register" @click="showLogin = !showLogin">注册账号</span>
      </div>
      <div class="register" v-else>
        <h4>注册</h4>
        <el-input
          v-model="userInfo.nickname"
          placeholder="请输入昵称"
        ></el-input>
        <el-input
          v-model="userInfo.username"
          placeholder="请输入用户名"
        ></el-input>
        <el-input
          placeholder="请输入密码"
          v-model="userInfo.password"
          show-password
        ></el-input>
        <el-input
          placeholder="请确认密码"
          v-model="userInfo.confirmPassword"
          show-password
        ></el-input>
        <el-input
          placeholder="请输入手机号"
          v-model="userInfo.mobile"
        ></el-input>
        <el-button type="primary" size="medium" @click="register"
          >注册</el-button
        >
        <span @click="showLogin = !showLogin">登陆账号</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getRegister, getLogin } from "../../api/index";
export default {
  props: ["show"],
  data() {
    return {
      userInfo: {
        username: "",
        password: "",
        nickname: "",
        mobile: "",
        confirmPassword: "",
      },
      showLogin: true,
    };
  },
  methods: {
    // 登录
    // handleInput() {
    //   this.userInfo.username = this.userInfo.username.replace(
    //     /[^A-Za-z0-9]/g,
    //     ""
    //   );
    // },
    async login() {
      const res = await getLogin({
        username: this.userInfo.username,
        password: this.userInfo.password,
      });
      if (res.code == 0) {
        localStorage.setItem("token", res.data.token);
        this.userInfo = {};
        this.$message({
          message: "登录成功",
          type: "success",
        });
        this.$store.commit("showLogin");
        this.$router.go(0);
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    // 注册
    async register() {
      if (this.userInfo.password === this.userInfo.confirmPassword) {
        const res = await getRegister(this.userInfo);
        if (res.code == 0) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userInfo", this.userInfo);
          this.showLogin = !this.showLogin;
          this.userInfo = {};
          this.$message({
            message: "注册成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      } else {
        this.$message("确认密码错误");
      }
    },
    // 把数据传递给父组件
    showClick() {
      this.$store.commit("showLogin");
    },
    // 阻止内盒子触发
    goStop() {},
  },
  computed: {},
  filters: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
/* 模态框的背景 */
.big {
  position: fixed; /* 固定在视口 */
  z-index: 999; /* 置于顶部 */
  left: 0;
  top: 0;
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  overflow: auto; /* 允许滚动 */
  background-color: rgba(0, 0, 0, 0.4); /* 黑色背景，半透明 */
}
.login {
  text-align: center;
  margin: 0 auto;
}

/* 模态框的内容 */
.small {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fefefe;
  padding: 1.25rem;
  border: 1px solid #888;
  border-radius: 0.65rem;
  z-index: 999; /* 置于顶部 */

  .img {
    width: 40%;
    margin-right: 1.25rem;
  }
  h4 {
    margin: 1.25rem 0;
  }
  .el-input {
    margin: 0.65rem 0;
  }
  span {
    display: block;
    font-size: 0.8rem;
    margin: 0.625rem 0;
    color: #1890ff;
    cursor: pointer;
  }
}

@media screen and (min-width: 937px) {
  .small {
    width: 50%;
    margin: 15% auto; /* 15% 从顶部开始，水平居中 */
  }
}

@media screen and (min-width: 664px) {
  .small {
    width: 50%;
    margin: 15% auto; /* 15% 从顶部开始，水平居中 */
  }
}

@media screen and (max-width: 663px) {
  .small {
    width: 80%;
    margin: 70% auto; /* 15% 从顶部开始，水平居中 */
  }
  .img {
    display: none;
  }
}
</style>
